<template>
  <div>
    <div id="container" style="width: 100%;height: 620px"></div>
  </div>
</template>

<script>
export default {
  name: "Map",
  data() {
    return {
      busOutput: ""
    }
  },
  methods: {

  },
  created() {

  },
  mounted() {
    // // 创建地图实例
    // var map = new AMap.Map("container", {
    //   zoom: 13,
    //   center: [116.396817,39.918517]
    // })
    //
    // var clickHandler = function(e) {
    //   // alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
    //   console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！')
    // }
    //
    // // 绑定事件
    // map.on('click', clickHandler);
    //
    // // 创建一个 Marker 实例：
    // var marker = new AMap.Marker({
    //   position: new AMap.LngLat(116.396817,39.918517),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: '北京故宫'
    // })
    //
    // marker.on('click', clickHandler);
    //
    // // 将创建的点标记添加到已有的地图实例：
    // map.add(marker);

    // var start = new BMap.Point(103.735184, 36.056702);
    // var end = new BMap.Point(103.776978, 36.056339);
    // transit.search(start, end);
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(103.776978, 36.056339), 15);
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    //平移缩放控件
    map.addControl(new BMap.NavigationControl())
    //比例尺
    map.addControl(new BMap.ScaleControl());
    //缩略地图
    map.addControl(new BMap.OverviewMapControl());
    //添加缩放控件
    // map.addControl(new BMap.ZoomControl())
    var opts = {offset: new BMap.Size(80, 5)}
    map.addControl(new BMap.CityListControl(opts))
    //公交出行规划
    var transit = new BMap.TransitRoute(map, {
      renderOptions: {
        map: map,
        autoViewport: true
      },
      // 配置跨城公交的换成策略为优先出发早
      intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START,
      // 配置跨城公交的交通方式策略为飞机优先
      transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE
    });
    let start;
    //开启定位
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // alert('您的位置：'+r.point.lng+','+r.point.lat);
        start = new BMap.Point(r.point.lng,r.point.lat)
        var end = new BMap.Point(103.776978, 36.056339);
        transit.search(start, end);
        var point = start
        //添加标注
        //当前位置地图添加大号 文本标注
        var content = '您的当前位置';
        var label = new BMap.Label(content, {       // 创建文本标注
          position: point,
          offset: new BMap.Size(5, 10)
        })
        map.addOverlay(label);                        // 将标注添加到地图中
        label.setStyle({                              // 设置label的样式
          color: '#000',
          fontSize: '20px',
          border: '1px solid white',
          opacity: 0.7
        })
        //医院位置地图添加大号 文本标注
        var pointHospital = new BMap.Point(103.776978, 36.056339)
        var contentHospital = '医院的位置';
        var labelHospital = new BMap.Label(contentHospital, {       // 创建文本标注
          position: pointHospital,
          offset: new BMap.Size(5, 10)
        })
        map.addOverlay(labelHospital);                        // 将标注添加到地图中
        labelHospital.setStyle({                              // 设置label的样式
          color: '#000',
          fontSize: '20px',
          border: '1px solid white',
          opacity: 0.7
        })
      }
      else {
        alert('failed'+this.getStatus());
      }
    });
    // start = new BMap.Point(103.74107916112,36.064490667394);

  }
}
</script>

<style scoped>

</style>